
<template>
  <div class="login-container">
    <el-form class="form-login" v-model="formdata" label-width="80px" >
      <el-form-item label="用户名" class="label-username">
        <el-input v-model="formdata.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" class="label-password">
        <el-input type="password" v-model="formdata.password"></el-input>
      </el-form-item>
      <el-form-item class="btn-longin">
      <el-button type="primary" class="login-btn" @click="submit">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formdata: {
        username: "admin",
        password: "123",
      },
    };
  },
  methods: {
      submit() {
          //console.log(this.formdata);
        if(this.formdata.username===''){
            this.$message.error("用户名不能为空");
            return
        }
        if (this.formdata.password === ''){
            this.$message.error("密码不能为空");
            return
        }
        localStorage.setItem('token','123456')
        this.$router.push({
            name: 'home'
        })
        this.$message.success("登陆成功");
      }
  }
};
</script>
<style scoped>
.login-container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#ccc; 
 
}

.login-container .form-login {
   width: 400px;
   background-color: rgb(143, 150, 155);
   border-radius: 5px;
   padding: 30px; 
}
.login-container .login-btn {
    width: 100%;
}

</style>